<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="container" style="margin-top:20px;">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">登录</div>
                        <div class="panel-body">
                            <form class="form-inline" role="form" id="fm-login">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">账号</div>
                                        <input class="form-control" type="text" name="account" placeholder="Enter Account">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">密码</div>
                                        <input class="form-control" type="password" name="passwd" placeholder="Enter Password">
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-default">登录</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
<script src="//cdn.bootcss.com/select2/4.0.3/js/i18n/zh-CN.js"></script>
<script src="../dist/Assert.js"></script>
<script>
    $(function(){
        $(".select2").select2();

		$("#fm-login").submit(function(){
			var fm = $(this);
			try {
				var account = fm.find("input[name='account']").val();
				var passwd = fm.find("input[name='passwd']").val();
				Assert.notEmpty(account , "登录账号不能为空");
				Assert.notEmpty(passwd, "登录密码不能为空");
				Assert.lengthBetween(passwd , 6,12 , "密码6~12位");
			} catch(e) {
				alert(e.message);
				return false;
			}
		});
    });
</script>
</body>
</html>
